<template>
	<view class="page_content">
		<view class="content">
			<Swiper :list="list1"></Swiper>
		</view>
		<view class="goods_content" v-for="item in goodsData" :key="item.id">
			<view class="content_img">
				<image :src="item.img" style="width:180px" mode="widthFix"></image>
			</view>
			<view class="content_title" >
				<view class="title">{{item.type}}</view>
				<view class="desc">{{item.desc}}</view>
				<view class="price">￥{{item.price}}</view>
				<u-button text="立即购买" class="btn" :customStyle="btnStyle" color="#BE2E23" shape="circle"></u-button>
			</view>
		</view>
		
		<nav-bar></nav-bar>
	</view>

</template>

<script>
	import Swiper from "@/components/swiper/index.vue";

	export default {
		components: {
			Swiper
		},
		data() {
			return {
				title: 'Hello',
				swiperCurrent: 0,
				list1: [{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '圣诞节'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '特惠季'
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '国货品牌'
					}
				],
				btnStyle:{
					marginTop: '20rpx',
					height: '60rpx',
					width: '160rpx',
					marginLeft: 0,
					marginTop: '34rpx'
				},
				goodsData:[
					{
						id:1,
						title:'羊排',
						type:'精美实惠装',
						desc:'送亲朋好友不二之选',
						price:68,
						img:'../../static/goods/one.png'
					},
					{
						id:2,
						title:'牛排',
						type:'精美实惠装',
						desc:'送亲朋好友不二之选',
						price:68,
						img:'../../static/goods/two.png'			
					},
					{
						id:3,
						title:'羊排',
						type:'精美实惠装',
						desc:'送亲朋好友不二之选',
						price:68,
						img:'../../static/goods/one.png'
					},
					{
						id:4,
						title:'牛排',
						type:'精美实惠装',
						desc:'送亲朋好友不二之选',
						price:68,
						img:'../../static/goods/two.png'			
					}
				]

			}
		},
		onLoad() {

		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.page_content {
		background-color: rgba(245, 245, 245, 1);
		min-height: 100vh;
	}

	.content {
		height: 400rpx;
	}

	.goods_content {
		background: rgba(0, 0, 0, 1);
		padding: 40rpx;
		display: flex;

		.content_img {
			width: 360rpx;
		}

		.content_title {
			flex: 1;
			padding: 4rpx 20rpx 0;

			.title {
				height: 17px;
				opacity: 1;
				/** 文本1 */
				font-size: 17px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 17px;
				color: rgba(255, 255, 255, 1);
				margin-bottom: 24rpx;
			}

			.desc {
				height: 12px;
				opacity: 1;
				/** 文本1 */
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 12px;
				margin-bottom: 24rpx;
				color: rgba(255, 255, 255, 1);
			}

			.price {
				height: 17px;
				opacity: 1;
				/** 文本1 */
				font-size: 17px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 17px;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>